<template>
  <div class="page-container-padding">
    <div class="new-box">
      <el-input
        v-model="newBlock.name"
        clearable
        placeholder="输入要新建的板块名称"
        style="width: 200px"
        size="mini"
      />
      <el-button
        :loading="newBlock.saveLoading"
        size="mini"
        type="primary"
        style="margin-left: 6px"
        :disabled="newBlock.name.length < 1"
        @click="toSaveNewBlock"
      >
        确定新建
      </el-button>
    </div>
    <div style="margin-top: 10px">
      <el-table border stripe :data="blockList">
        <el-table-column prop="id" label="ID" width="60" />
        <el-table-column prop="block_name" label="名称" />
        <el-table-column prop="sort_num" label="顺序" width="60" />
        <el-table-column label="状态" width="110" align="center">
          <template #default="scope">
            <el-tag
              size="mini"
              :type="scope.row.is_active ? 'success' : 'danger'"
            >
              {{ scope.row.is_active ? '公开' : '隐藏' }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column label="操作" width="60" align="center">
          <template #default="scope">
            <el-button type="text" @click="toUpdateBlockName(scope.row)">
              编辑
            </el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div class="gap-line">
      <div>选择板块名称，管理板块下的指标组</div>
    </div>
    <!-- 数据组合 -->
    <div>
      <el-select
        v-model="newGroup.blockId"
        clearable
        placeholder="选择数据组合"
        size="mini"
        style="width: 200px"
      >
        <el-option
          v-for="b in blockList"
          :key="b.id"
          :label="b.block_name"
          :value="b.id"
        />
      </el-select>
      <el-button
        type="primary"
        size="mini"
        style="margin-left: 6px"
        :disabled="!newGroup.blockId"
        @click="toQueryBlockIndexGroup"
      >
        查询
      </el-button>
      <el-button
        type="success"
        size="mini"
        style="margin-left: 6px"
        :disabled="!newGroup.blockId"
        @click="toCreateNewGroup"
      >
        新建数据
      </el-button>
    </div>
    <div style="margin-top: 10px">
      <el-table border stripe :data="blockGroupList">
        <el-table-column prop="id" label="ID" width="50" />
        <el-table-column prop="block_name" label="板块名" />
        <el-table-column prop="index_name" label="数据名" />
        <el-table-column prop="frequency" label="频率" width="70" />
        <el-table-column prop="start_date" label="开始日期" width="110" />
        <el-table-column prop="end_date" label="结束日期" width="110" />
        <el-table-column prop="sort_num" label="顺序" width="70" />
        <el-table-column label="操作" width="60" align="center">
          <template #default="scope">
            <el-button type="text" @click="toUpdateBlockGroup(scope.row)">
              编辑
            </el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div class="gap-line">
      <div>选择指标组名，打包其内的指标条目</div>
    </div>
    <!-- 组内加指标 -->
    <div>
      <el-select
        v-model="newIndex.block_group_id"
        clearable
        placeholder="选择数据名"
        size="mini"
        style="width: 200px"
      >
        <el-option
          v-for="g in blockGroupList"
          :key="g.id"
          :label="g.index_name"
          :value="g.id"
        />
      </el-select>
      <el-select
        v-model="newIndex.variety_en"
        clearable
        filterable
        placeholder="选择品种"
        size="mini"
        style="width: 200px; margin-left: 6px"
      >
        <el-option
          v-for="v in varietyList"
          :key="v.code"
          :label="`${v.name} (${v.code})`"
          :value="v.code"
        />
      </el-select>
      <el-button
        type="primary"
        size="mini"
        style="margin-left: 6px"
        :disabled="!newIndex.block_group_id"
        @click="toQueryGroupIndex"
      >
        查询
      </el-button>
      <el-button
        type="success"
        size="mini"
        style="margin-left: 6px"
        :disabled="!newIndex.block_group_id || !newIndex.variety_en"
        @click="toDialogAddGroupIndex"
      >
        添加指标
      </el-button>
    </div>
    <div style="margin-top: 10px">
      <el-table border stripe :data="groupIndexList">
        <el-table-column prop="id" label="ID" width="50" />
        <el-table-column prop="block_group_id" label="组ID" width="50" />
        <el-table-column prop="index_name" label="数据名称" />
        <el-table-column prop="index_id" label="数据ID" width="90" />
        <el-table-column prop="db_name" label="所在库" width="100" />
        <el-table-column prop="tb_name" label="表名称" width="160" />
        <el-table-column prop="plat_id" label="系统ID" width="120" />
        <el-table-column prop="unit" label="单位" width="100" />
        <el-table-column prop="frequency" label="频率" width="70" />
        <el-table-column prop="variety_en" label="品种" width="50" />
      </el-table>
    </div>
    <!-- 新增数据组条目弹窗 -->
    <el-dialog :visible.sync="newGroup.showDialog" title="板块内新建数据组条目">
      <div style="padding: 0 15px">
        <el-form label-width="70px">
          <el-form-item label="名称">
            <el-input
              v-model="newGroup.index_name"
              placeholder="数据组的名称"
            />
          </el-form-item>
          <el-form-item label="频率">
            <el-select v-model="newGroup.frequency">
              <el-option
                v-for="(f, i) in indexFrequecnyList"
                :key="i"
                :label="f"
                :value="f"
              />
            </el-select>
          </el-form-item>
          <el-form-item label="单位">
            <el-input v-model="newGroup.unit" placeholder="输入指标的单位" />
          </el-form-item>
          <el-form-item label="开始日期">
            <el-date-picker v-model="newGroup.startDate" />
          </el-form-item>
          <el-form-item label="备注">
            <el-input v-model="newGroup.note" placeholder="数据组的备注信息" />
          </el-form-item>
          <el-form-item label="排序">
            <el-input-number v-model="newGroup.sort_num" :min="1" />
          </el-form-item>
        </el-form>
      </div>
      <div slot="footer">
        <el-button size="mini" @click="newGroup.showDialog = false">
          取消
        </el-button>
        <el-button size="mini" type="primary" @click="toSaveBlockNewIndexGroup">
          确认保存
        </el-button>
      </div>
    </el-dialog>
    <!-- 新增组内指标 -->
    <el-dialog :visible.sync="newIndex.showDialog" title="打包数据">
      <div style="padding: 0 15px">
        <el-form label-width="70px">
          <el-form-item label="搜索">
            <div style="display: flex; align-items: center">
              <el-select
                v-model="newIndex.index_id"
                filterable
                remote
                :remote-method="queryIndexesList"
              >
                <el-option
                  v-for="i in indexForSelectList"
                  :key="i.id"
                  :value="i.id"
                  :label="`${i.name}(${i.plat})`"
                />
              </el-select>
              <div style="margin-left: 8px">
                <span>ID=</span>
                <span style="color: #d2291e; font-weight: 600">
                  {{ newIndex.index_id }}
                </span>
              </div>
            </div>
          </el-form-item>
          <el-form-item label="新名称">
            <el-input
              v-model="newIndex.index_name"
              placeholder="重新命名指标名称"
            />
          </el-form-item>
          <el-form-item label="归属ID">
            <span>{{ newIndex.block_group_id }}</span>
          </el-form-item>
          <el-form-item label="品种码">
            <span>{{ newIndex.variety_en }}</span>
          </el-form-item>
          <el-form-item label="备注">
            <el-input v-model="newIndex.note" placeholder="备注" />
          </el-form-item>
        </el-form>
      </div>
      <div slot="footer">
        <el-button size="mini" @click="newIndex.showDialog = false">
          取消
        </el-button>
        <el-button
          type="primary"
          size="mini"
          :loading="newIndex.addLoading"
          @click="toAddGroupIndex"
        >
          确定添加
        </el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
  import { datetimeToStr } from '@/utils/datetimeUtils'
  import { RetrieveVariety } from '@/api/adminRuizhi/common'
  import { RetrieveIndex } from '@/api/adminRuizhi/dataindexlib'
  import {
    CreateNewFlexBlock,
    RetrieveFlexBlock,
    CreateBlockIndexGroup,
    RetrieveBlockIndexGroup,
    CreateBlockGroupIndex,
    RetrieveBlockGroupIndex,
  } from '@/api/adminRuizhi/datalibflex'
  export default {
    data() {
      return {
        indexForSelectList: [],
        varietyList: [],
        newBlock: {
          name: '',
          saveLoading: false,
        },
        blockList: [],
        indexFrequecnyList: ['日', '周', '月', '季', '年'],
        newGroup: {
          showDialog: false,
          blockId: null,
          index_name: '',
          frequency: '',
          unit: '',
          startDate: null,
          endDate: null,
          sort_num: 1,
          note: '',
          saveLoading: false,
        },
        blockGroupList: [],
        newIndex: {
          addLoading: false,
          showDialog: false,
          index_id: null,
          index_name: null,
          block_group_id: null,
          variety_en: null,
          note: '',
        },
        groupIndexList: [],
        userGroup: {
          userId: null,
        },
      }
    },
    computed: {
      selectIndexId() {
        return this.newIndex.index_id
      },
    },
    watch: {
      selectIndexId(n) {
        const obj = this.getSelectedIndexObj(n)
        if (obj) {
          this.newIndex.index_name = obj.name
        }
      },
    },
    mounted() {
      this.queryBlocks()
      RetrieveVariety(null, 'S05').then((res) => {
        this.varietyList = res.data.data
      })
    },
    methods: {
      // 关键字查询指标
      queryIndexesList(keyword) {
        if (keyword.length < 1) return
        RetrieveIndex(keyword).then((res) => {
          const resData = res.data
          this.indexForSelectList = resData.data.rows
        })
      },
      getSelectedIndexObj(iid) {
        let obj = null
        for (let i = 0; i < this.indexForSelectList.length; i++) {
          if (this.indexForSelectList[i].id === iid) {
            obj = this.indexForSelectList[i]
            break
          }
        }
        return obj
      },

      queryBlocks() {
        RetrieveFlexBlock().then((res) => {
          this.blockList = res.data.blocks
        })
      },

      toSaveNewBlock() {
        if (this.newBlock.name.length < 1) return
        this.newBlock.saveLoading = true
        CreateNewFlexBlock({ name: this.newBlock.name }).then((res) => {
          this.newBlock.saveLoading = false
          this.$baseMessage(res.message, 'success')
          this.queryBlocks()
          this.newBlock.name = ''
        })
      },

      toUpdateBlockName(block) {
        // console.log(block)
        this.$baseMessage('暂不支持编辑', 'info')
      },

      toUpdateBlockGroup(group) {
        // console.log(group)
        this.$baseMessage('暂不支持编辑', 'info')
      },

      toQueryBlockIndexGroup() {
        RetrieveBlockIndexGroup(this.newGroup.blockId).then((res) => {
          this.blockGroupList = res.data.groups
        })
      },

      toCreateNewGroup() {
        this.newGroup.showDialog = true
      },

      toSaveBlockNewIndexGroup() {
        const bodyData = {
          block_id: this.newGroup.blockId,
          index_name: this.newGroup.index_name,
          frequency: this.newGroup.frequency,
          unit: this.newGroup.unit,
          start_date: this.newGroup.startDate
            ? datetimeToStr(this.newGroup.start_date, true, '-')
            : null,
          end_date: this.newGroup.end_date
            ? datetimeToStr(this.newGroup.end_date, true, '-')
            : null,
          sort_num: this.newGroup.sort_num,
          note: this.newGroup.note,
        }
        CreateBlockIndexGroup(bodyData).then((res) => {
          this.$baseMessage(res.message, 'success')
          this.toQueryBlockIndexGroup()
          this.newGroup.showDialog = false
        })
      },

      // 查看板块下组别内的数据指标
      toQueryGroupIndex() {
        const params = {
          bgid: this.newIndex.block_group_id,
          ven: this.newIndex.variety_en,
        }
        RetrieveBlockGroupIndex(params.bgid, params.ven).then((res) => {
          this.groupIndexList = res.data.index_list
        })
      },
      toDialogAddGroupIndex() {
        this.newIndex.showDialog = true
      },

      toAddGroupIndex() {
        const bodyData = {
          index_id: this.newIndex.index_id,
          index_name: this.newIndex.index_name,
          block_group_id: this.newIndex.block_group_id,
          variety_en: this.newIndex.variety_en,
          note: this.newIndex.note,
        }
        if (!bodyData.index_id) {
          this.$baseMessage('搜索设置指标后再保存!', 'error')
          return
        }
        console.log(bodyData)
        CreateBlockGroupIndex(bodyData).then((res) => {
          this.$baseMessage(res.message, 'success')
          this.newIndex.showDialog = false
          this.toQueryGroupIndex()
        })
      },
    },
  }
</script>
<style lang="scss" scopde>
  .new-box {
    display: flex;
    align-items: center;
  }
  .new-group {
    display: flex;
    align-items: center;
    margin-top: 10px;
  }
  .gap-line {
    background-color: #eee;
    height: 20px;
    margin: 20px 0;
    line-height: 20px;
    padding-left: 12px;
    color: #f03300;
  }
</style>
